<template>
  <div ref="left" class="left"></div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, onUnmounted, onActivated } from 'vue'

//  按需引入 echarts
import * as echarts from 'echarts'

const left = ref()

let chartObj = reactive<{
  chart1: echarts.ECharts | null
}>({
  chart1: null
})

// 初始化
const init1 = () => {
  // 基于准备好的dom，初始化echarts实例
  const myChart = echarts.init(left.value)
  let option = {
    backgroundColor: '#fff',
    title: {
      textStyle: {
        rich: {
          a: {
            fontSize: 16,
            fontWeight: 600
          }
        }
      },
      top: '2%',
      left: '2%'
    },
    legend: {
      data: ['访客', '分享', '点击率'],
      textStyle: {
        align: 'right'
      },
      top: '2%',
      right: '2%'
    },

    tooltip: {
      trigger: 'axis'
    },

    grid: {
      top: '18%',
      left: '70px',
      right: '20px',
      bottom: '11%'
    },
    xAxis: [
      {
        type: 'category',
        axisLine: {
          show: true
        },
        splitArea: {
          // show: true,
          color: '#f00',
          lineStyle: {
            color: '#f00'
          }
        },
        splitLine: {
          show: false
        },
        axisLabel: {
          margin: 10
        },
        boundaryGap: false,
        data: [3 + '月', 3 + '月', 4 + '月', 5 + '月', 7 + '月']
      }
    ],

    yAxis: [
      {
        type: 'value',
        // min: 0,
        // max: 140,
        splitNumber: 4,
        splitLine: {
          show: true,
          lineStyle: {
            color: '#e3e3e3'
          }
        },
        axisLine: {
          show: false
        },
        axisLabel: {
          show: true,
          margin: 20,
          formatter: '{value} %'
        },
        axisTick: {
          show: false
        }
      }
    ],
    series: [
      {
        name: '访客',
        type: 'line',
        smooth: true, //是否平滑
        showAllSymbol: true,
        symbol: 'circle',
        symbolSize: 12,
        lineStyle: {
          color: '#7AA1FF'
        },
        itemStyle: {
          color: '#7AA1FF',
          borderWidth: 3,
          borderColor: '#f3f3f3'
        },
        data: [31.9, 10.9, 3.1, 35, 7]
      },
      {
        name: '分享',
        type: 'line',
        smooth: true, //是否平滑
        showAllSymbol: true,
        symbol: 'circle',
        symbolSize: 12,
        lineStyle: {
          color: '#00ca95'
        },
        itemStyle: {
          color: '#00ca95',
          borderColor: '#fff',
          borderWidth: 3
        },
        data: [0, 0, 48.5, 31.7, 41.8]
      },
      {
        name: '点击率',
        type: 'line',
        smooth: true, //是否平滑
        showAllSymbol: true,
        symbol: 'circle',
        symbolSize: 12,
        lineStyle: {
          color: '#C258F6'
        },
        itemStyle: {
          color: '#C258F6',
          borderColor: '#fff',
          borderWidth: 3
        },
        data: [28.3, 40.1, 61.1, 26.1, 3.9]
      }
    ]
  }
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option)
  return myChart
}

// resize
const listener = () => {
  chartObj.chart1?.resize()
}

// 挂载
onMounted(() => {
  chartObj.chart1 = init1()
  window.addEventListener('resize', listener)
})
onUnmounted(() => {
  chartObj.chart1 = null
  window.removeEventListener('resize', listener)
})
onActivated(() => {
  listener()
})
</script>

<style lang="less" scoped></style>
